$(function () {
	var idList = {};
	var bigTriangle = {
		"size": {
			"width": 5.6,
			"height": 5.6
		},
		"point": [
			{"x": 5.6, "y": 0},
			{"x": 5.6, "y": 5.6}
		]
	};
	var smallTriangle = {
		"size": {
			"width": 4,
			"height": 4
		},
		"point": [
			{"x": 4, "y": 0},
			{"x": 4, "y": 4}
		]
	};
	var parallelogram = {
		"size": {
			"width": 4,
			"height": 8
		},
		"point": [
			{"x": 4, "y": 4},
			{"x": 4, "y": 8},
			{"x": 0, "y": 4}
		]
	};
	var parallelogramM = {
		"size": {
			"width": 8,
			"height": 4
		},
		"point": [
			{"x": 4, "y": 0},
			{"x": 8, "y": 4},
			{"x": 4, "y": 4}
		]
	};
	var trapezoid = {
		"size": {
			"width": 6,
			"height": 4
		},
		"point": [
			{"x": 6, "y": 0},
			{"x": 2, "y": 4},
			{"x": 0, "y": 4}
		]
	};
	var trapezoidM = {
		"size": {
			"width": 6,
			"height": 4
		},
		"point": [
			{"x": 2, "y": 0},
			{"x": 6, "y": 4},
			{"x": 0, "y": 4}
		]
	};
	var gun = {
		"size": {
			"width": 4,
			"height": 6
		},
		"point": [
			{"x": 4, "y": 0},
			{"x": 4, "y": 2},
			{"x": 2, "y": 2},
			{"x": 2, "y": 6},
			{"x": 0, "y": 6}
		]
	};
	var gunM = {
		"size": {
			"width": 4,
			"height": 6
		},
		"point": [
			{"x": 4, "y": 0},
			{"x": 4, "y": 6},
			{"x": 2, "y": 6},
			{"x": 2, "y": 2},
			{"x": 0, "y": 2}
		]
	};
	var circle = {
		"size": {
			"width": 2.8,
			"height": 1.4
		},
		"point": {
			"x": 1.4,
			"y": 1.4,
			"r": 1.4
		}
	};
	var other = {
		"size": {
			"width": 2,
			"height": 2
		},
		"pointA": [
			{"x": 0.6, "y": 0}
		],
		"pointB": [
			{"x": 2, "y": 2},
			{"x": 0, "y": 2}
		]
	};

	idList.bigTriangleB = idList.bigTriangleA = bigTriangle;
	idList.smallTriangleB = idList.smallTriangleA = smallTriangle;

	idList.s_parallelogram = parallelogram;
	idList.s_trapezoidB = idList.s_trapezoidA = trapezoid;
	idList.s_gunB = idList.s_gunA = gun;

	idList.m_parallelogram = parallelogramM;
	idList.m_trapezoidB = idList.m_trapezoidA = trapezoidM;
	idList.m_gunB = idList.m_gunA = gunM;

	YJT.init(idList);

	var begin = YJT.beginDraw('circleA', circle.size);
	begin.arc(circle.point.x * YJT.zoop,circle.point.y * YJT.zoop,circle.point.r * YJT.zoop,0,Math.PI,1);
	YJT.endDraw(begin);

	var begin = YJT.beginDraw('circleB', circle.size);
	begin.arc(circle.point.x * YJT.zoop,circle.point.y * YJT.zoop,circle.point.r * YJT.zoop,0,Math.PI,1);
	YJT.endDraw(begin);
////
	var begin = YJT.beginDraw('otherA', other.size);
	begin.moveTo(0, 0);
	var arc = YJT.drawLine(begin, other.pointA);
	arc.arc(2 * YJT.zoop,0,1.4 * YJT.zoop,0,Math.PI / 2 ,1);
	YJT.drawLine(arc, other.pointB);
	YJT.endDraw(arc);

	var begin = YJT.beginDraw('otherB', other.size);
	begin.moveTo(0, 0);
	var arc = YJT.drawLine(begin, other.pointA);
	arc.arc(2 * YJT.zoop,0,1.4 * YJT.zoop,0,Math.PI / 2 ,1);
	YJT.drawLine(arc, other.pointB);
	YJT.endDraw(arc);

	var begin = YJT.beginDraw('otherC', other.size);
	begin.moveTo(0, 0);
	var arc = YJT.drawLine(begin, other.pointA);
	arc.arc(2 * YJT.zoop,0,1.4 * YJT.zoop,0,Math.PI / 2 ,1);
	YJT.drawLine(arc, other.pointB);
	YJT.endDraw(arc);

	var begin = YJT.beginDraw('otherD', other.size);
	begin.moveTo(0, 0);
	var arc = YJT.drawLine(begin, other.pointA);
	arc.arc(2 * YJT.zoop,0,1.4 * YJT.zoop,0,Math.PI / 2 ,1);
	YJT.drawLine(arc, other.pointB);
	YJT.endDraw(arc);

	$(".yj").draggable({
		stack: "body canvas",
		stop: function() {
			localStorage.id = $(this).attr('id');
			if ('_' == localStorage.id.substr(1,1)) {
				$("#" + YJT.getMirrorId()).attr('style', $(this).attr('style'));
				$("#" + YJT.getMirrorId()).hide();
			}
		}
	});

	$(".yj").on('click', function () {
		localStorage.id = $(this).attr('id');
		YJT.rotate(this);
	});

	//移动端兼容
	$(".yj").on('touchend', function () {
		localStorage.id = $(this).attr('id');
        if (0 == moveFlag) {
            YJT.rotate(this);
        }
	});
	//双击
	$('.yj').on('touchstart', function () {
		YJT.click++;
		setTimeout(function () {
			YJT.click = 0;
		}, 500);
		if (YJT.click > 1) {

			YJT.click = 0;
		}
	});

	$(document).keypress(function(event){
		if (13 == event.keyCode && '_' == localStorage.id.substr(1,1)) {
			$("#" + localStorage.id).hide();
			$("#" + YJT.getMirrorId()).show();
			localStorage.id = YJT.getMirrorId();
		}
	});
});

var YJT = {
	"count": 0,
	"zoop": 22,
	"step": 45,
	"click": 0,
	"init": function (idList) {
		for (id in idList) {
			var begin = this.beginDraw(id, idList[id]['size']);
			begin.moveTo(0, 0);
			var line = this.drawLine(begin, idList[id]['point']);
			this.endDraw(line);
		}
	},
	"beginDraw": function (id, data) {
		$("#" +id).attr('width', data.width * this.zoop).attr('height', data.height * this.zoop);
		var canvasObj = $("#" + id)[0].getContext("2d");
		canvasObj.beginPath();
		return canvasObj;
	},
	"drawLine": function (that, point) {
		for (xyz of point) {
			that.lineTo(xyz.x * this.zoop, xyz.y * this.zoop);
		}
		return that;
	},
	"drawCircle": function (that, point) {
		that.arc(point.x * this.zoop,point.y * this.zoop,point.r * this.zoop,point.start,point.end,point.isUpClock);
		return that;
	},
	"endDraw": function (that) {
		that.closePath();
		that.fillStyle = this.getColor();
		that.fill();
		this.count++;
	},
	"getColor": function () {
		var color = [
			'rgba(255, 232, 0, 0.5)',
			'rgba(20, 162, 212, 0.5)',
			'rgba(175, 94, 156, 0.5)',
			'rgba(0, 177, 106, 0.5)',
			'rgba(247, 148, 30, 0.5)',
			'rgba(0, 82, 156, 0.5)'
		];
		return color[this.count % 6];
	},
	"rotate": function (that) {
		if ($(that).getRotateAngle()[0]) {
			$(that).rotate({
				"animateTo": this.step + $(that).getRotateAngle()[0]
			});
		} else {
			$(that).rotate({
				"animateTo": this.step
			});
		}
	},
	"getMirrorId": function () {
		if ('s' == localStorage.id.substr(0,1)) {
			return localStorage.id.replace(/^s/, "m");
		} else {
			return localStorage.id.replace(/^m/, "s");
		}
	}
};